<!--
 * @Date: 2019-12-13 14:39:21
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2020-05-08 10:10:16
 * @describe: -房源page-
 -->
<template>
  <div class="HousingPages">
    <el-row>
      <el-col :span="18">
        <span class="title_span">房源管理 - 房源详情</span>
      </el-col>
      <el-col :span="5" style="text-align:right">
        <el-button
          v-if="hasPermissionInfo('house:houseinfo:update')&&$hasPermission('house:houseinfo:update')"
          type="text"
          icon="el-icon-edit"
          @click="updateClick"
        >修改</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span
              class="font_wei600"
              style="font-size:18px"
            >房源编号：{{"FY - "+HousingID.substring(HousingID.length-6)}}</span>
            <span
              class="font_wei600"
              style="font-size:16px; margin-left: 30px; color: #ec380f"
              v-if="IntentionNum"
            >意向房源（{{IntentionNum}}个客户在谈）</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              v-if="hasPermissionInfo('house:houseseal:save')"
              @click="Sealvisible=true"
            >封盘</el-button>
          </div>
          <el-tabs v-model="activeName" class="customTabs" @tab-click="tabClick">
            <el-tab-pane name="first">
              <div slot="label">
                <img src="~@/assets/img/基本信息.png" alt />
                <div class="text_center">基本信息</div>
              </div>
              <HousingHomeLease
                :HousingID="HousingID"
                :transactionType="transactionType"
                :type="type"
                @getdataFormInfo="getdataFormInfo"
                ref="HousingHomeLease"
              ></HousingHomeLease>
            </el-tab-pane>
            <el-tab-pane name="second" v-if="hasPermissionInfo('house:houseinfo:matchingCustomer')">
              <div slot="label">
                <img src="~@/assets/img/客源匹配.png" alt />
                <div class="text_center">客源匹配</div>
              </div>
              <housePipei></housePipei>
            </el-tab-pane>
            <el-tab-pane name="third" v-if="hasPermissionInfo('house:houseentrust:page')">
              <div slot="label">
                <img src="~@/assets/img/委托管理.png" alt />
                <div class="text_center">委办管理</div>
              </div>
              <houseentrust
                :HousingID="HousingID"
                :permissionListDTO="dataFormInfo.permissionListDTO"
              ></houseentrust>
            </el-tab-pane>
            <el-tab-pane name="fourth" v-if="hasPermissionInfo('house:housekey:page')">
              <div slot="label">
                <img src="~@/assets/img/钥匙管理.png" alt />
                <div class="text_center">钥匙管理</div>
              </div>
              <housekey :HousingID="HousingID" :permissionListDTO="dataFormInfo.permissionListDTO"></housekey>
            </el-tab-pane>
            <el-tab-pane name="genjin" v-if="hasPermissionInfo('house:houseinfofollow:info')">
              <div slot="label">
                <img src="~@/assets/img/跟进记录.png" alt />
                <div class="text_center">跟进记录</div>
              </div>
              <housefollow
                :HousingID="HousingID"
                :permissionListDTO="dataFormInfo.permissionListDTO"
              ></housefollow>
            </el-tab-pane>
            <el-tab-pane
              name="diaoqu"
              v-if="$hasPermission('house:housephonelog:page')&&hasPermissionInfo('house:housephonelog:page')"
            >
              <div slot="label">
                <img src="~@/assets/img/调取记录.png" alt />
                <div class="text_center">调取记录</div>
              </div>
              <housephonelog :HousingID="HousingID"></housephonelog>
            </el-tab-pane>
            <el-tab-pane
              name="stateUpdate"
              v-if="$hasPermission('house:houseinfo:updateCore')&&hasPermissionInfo('house:houseinfo:updateCore')"
            >
              <div slot="label">
                <img src="~@/assets/img/状态变更.png" alt />
                <div class="text_center">核心内容</div>
              </div>
              <stateUpdate
                :HousingID="HousingID"
                :permissionListDTO="dataFormInfo.permissionListDTO"
              ></stateUpdate>
            </el-tab-pane>

            <el-tab-pane
              name="syslogdetailed"
              v-if="$hasPermission('house:syslogdetailed:page')&&hasPermissionInfo('house:syslogdetailed:page')"
            >
              <div slot="label">
                <img src="~@/assets/img/任务中心.png" alt />
                <div class="text_center">操作日志</div>
              </div>
              <syslogdetailed :HousingID="HousingID"></syslogdetailed>
            </el-tab-pane>
            <el-tab-pane
              name="deallog"
              v-if="$hasPermission('house:syslogdetailed:page')&&hasPermissionInfo('house:syslogdetailed:page')"
            >
              <div slot="label">
                <img src="~@/assets/img/成交记录.png" alt />
                <div class="text_center">成交记录</div>
              </div>
              <!-- <syslogdetailed :HousingID="HousingID"></syslogdetailed> -->
            </el-tab-pane>
            <el-tab-pane
              name="tixingjilu"
              v-if="hasPermissionInfo('sys:sysremind:save')&&hasPermissionInfo('sys:sysremind:save')"
            >
              <div slot="label">
                <img src="~@/assets/img/提醒记录.png" alt />
                <div class="text_center">发布任务</div>
              </div>
              <!-- 弹窗, 新增 / 修改 -->
              <sysremindadd v-if="sysremindAdd" ref="sysremindAdd"></sysremindadd>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="4" style="padding-left:16px">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card_title2">房主信息</span>
            <el-button
              v-if="hasPermissionInfo('house:houseinfo:housecCoreInfo')&&$hasPermission('house:houseinfo:housecCoreInfo')"
              style="float: right; padding: 0px 0"
              type="text"
              @click="Viewlinks"
            >查看</el-button>
          </div>
          <div class="HouseAgent" v-if="fangzhuView">
            <ul>
              <li>
                <span
                  class="leable"
                >{{$getDictLabel("houseSortType",dataFormInfo.sortType)?$getDictLabel("houseSortType",dataFormInfo.sortType)+'：':'' +'姓名：'}}</span>
                <span>{{dataFormInfo.ownerName}}</span>
              </li>

              <li>
                <span class="leable">电话1：</span>
                <span>{{dataFormInfo.ownerPhone1}}</span>
              </li>

              <li>
                <span class="leable">电话2：</span>
                <span>{{dataFormInfo.ownerPhone2}}</span>
              </li>

              <li>
                <span class="leable">电话3：</span>
                <span>{{dataFormInfo.ownerPhone3}}</span>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card_title2">相关经纪人</span>
            <el-button
              style="float: right; padding: 0px 0"
              type="text"
              v-if="hasPermissionInfo('house:houseinfo:updateHouseAgent')&&$hasPermission('house:houseinfo:updateHouseAgent')"
              @click="Agentvisible=true"
            >修改</el-button>
          </div>
          <div class="HouseAgent">
            <ul>
              <!-- <li>
                <span class="leable">开盘人:</span>
                <span
                  v-if="HouseAgent.creator1"
                >{{HouseAgent.creator1.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator1.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li> -->
              <li>
                <span class="leable">维护人:</span>
                <span
                  v-if="HouseAgent.creator2"
                >{{HouseAgent.creator2.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator2.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li>
              <li>
                <span class="leable">实勘人:</span>
                <span
                  v-if="HouseAgent.creator3"
                >{{HouseAgent.creator3.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator3.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li>
              <li>
                <span class="leable">视频人:</span>
                <span
                  v-if="HouseAgent.creator4"
                >{{HouseAgent.creator4.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator4.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li>
              <li>
                <span class="leable">钥匙人:</span>
                <span
                  v-if="HouseAgent.creator5"
                >{{HouseAgent.creator5.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator5.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li>
              <li>
                <span class="leable">备件人:</span>
                <span
                  v-if="HouseAgent.creator6"
                >{{HouseAgent.creator6.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator6.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li>
              <li>
                <span class="leable">VIP服务人:</span>
                <span
                  v-if="HouseAgent.creator7"
                >{{HouseAgent.creator7.name}}&nbsp;&nbsp;&nbsp;{{HouseAgent.creator7.phone}}</span>
                <span v-else>努力中。。。。</span>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 修改经纪人 -->
    <el-dialog :visible.sync="Agentvisible" title="修改经纪人" :destroy-on-close="true" width="30%">
      <el-form
        :model="AgentForm"
        ref="AgentForm"
        :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'"
        class="svgColor4"
      >
        <el-form-item label="经纪人类型：">
          <el-select v-model="AgentForm.type" class="FormSelect" style="width:100%">
            <!-- <el-option label="开盘人" value="1"></el-option> -->
            <el-option label="维护人" value="2"></el-option>
            <el-option label="实勘人" value="3"></el-option>
            <el-option label="视频人" value="4"></el-option>
            <el-option label="钥匙人 " value="5"></el-option>
            <el-option label="备件人" value="6"></el-option>
            <el-option label="VIP服务人" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="经纪人部门">
          <el-cascader
            style="width:100%"
            v-model="deptSelectVal"
            :options="this.$store.state.DeptList"
            :show-all-levels="false"
            @change="deptIdChange"
            :props="deptProps"
            ref="myCascader"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="经纪人">
          <el-select
            v-model="AgentForm.userId"
            placeholder="请选择"
            style="width:100%"
            clearable
            :disabled="AgentForm.deptId==''"
          >
            <el-option
              v-for="item in maintainList"
              :key="item.id"
              :label="item.realName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="Agentvisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="UpdateAgent()">{{ $t('confirm') }}</el-button>
      </template>
    </el-dialog>
    <!-- 封盘 -->
    <el-dialog :visible.sync="Sealvisible" title="申请封盘" :destroy-on-close="true" width="30%">
      <el-form
        :model="SealForm"
        ref="SealForm"
        :label-width="$i18n.locale === 'en-US' ? '120px' : '100px'"
        class="svgColor4"
      >
        <el-form-item label="封盘原因" prop="content">
          <el-input v-model="SealForm.content" placeholder="封盘原因" type="textarea" :rows="3"></el-input>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="SealForm.endTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width:100%"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="Sealvisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="AddSeal()">{{ $t('confirm') }}</el-button>
      </template>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <component v-if="addOruUpdate" :is="zjName" @CloseDialog="CloseDialogFun" :houseId="HousingID"></component>
  </div>
</template>
<script>
import HousingHomeLease from "./page/HousingHomeLease";
import houseentrust from "./page/houseentrust";
import housekey from "./page/housekey";
import housefollow from "./page/housefollow";
import housephonelog from "./page/housephonelog";
import stateUpdate from "./page/stateUpdate";
import housePipei from "./page/housePipei";
import syslogdetailed from "./page/syslogdetailed";
import sysremindadd from "../sys/sysremind-add-or-update";
export default {
  name: "",
  data() {
    return {
      HousingID: this.$route.query.ID,
      transactionType: this.$route.query.transactionType,
      type: this.$route.query.type,
      MaintainType: false,
      activeName: "first",
      LPimg: "",
      metroList: [],
      HouseAgent: {},
      IntentionNum: "",
      TodayHouseNum: "",
      addUrl: "",
      addOruUpdate: false,
      sysremindAdd: true,
      Agentvisible: false,
      Sealvisible: false,
      AgentForm: {
        type: "",
        houseId: this.$route.query.ID,
        deptId: "",
        userId: ""
      },
      SealForm: {
        type: "",
        houseId: this.$route.query.ID,
        deptId: "",
        userId: "",
        content: "",
        endTime: ""
      },
      deptSelectVal: "",
      deptProps: {
        value: "id",
        label: "name",
        checkStrictly: true
      },
      maintainList: [],
      dataFormInfo: {},
      fangzhuView: false
    };
  },
  components: {
    HousingHomeLease,
    houseentrust,
    housekey,
    housefollow,
    housephonelog,
    stateUpdate,
    housePipei,
    syslogdetailed,
    sysremindadd
  },
  computed: {
    zjName: {
      get: function() {
        this.addUrl;
        var myComponent = () => import(`${this.addUrl}`);
        return myComponent;
      }
    }
  },
  created() {
    this.getHouseAgent();
    this.getIntentionNum();
  },
  mounted() {},
  methods: {
    //房源修改
    updateClick() {
      let _this = this;
      this.addOruUpdate = true;
      if (this.type == 2) {
        //住宅
        if (this.transactionType == 0) {
          //出售
          this.addUrl = "./page/houseZM-add";
        } else if (this.transactionType == 1) {
          //出租
          this.addUrl = "./page/houseZZ-add";
        }
      } else if (this.type == 0) {
        //写字楼
        if (this.transactionType == 0) {
          //出售
          this.addUrl = "./page/houseXM-add";
        } else if (this.transactionType == 1) {
          //出租
          this.addUrl = "./page/houseXZ-add";
        }
      } else if (this.type == 1) {
        //公寓
        if (this.transactionType == 0) {
          //出售
          this.addUrl = "./page/houseZM-add";
        } else if (this.transactionType == 1) {
          //出租
          this.addUrl = "./page/houseZZ-add";
        }
      }
    },
    CloseDialogFun() {
      this.addOruUpdate = false;
      this.$refs.HousingHomeLease.getHomeLease();
    },
    //获取相关经纪人
    getHouseAgent() {
      let _this = this;
      this.$http
        .get("/house/houseinfo/getHouseAgent", {
          params: {
            id: this.HousingID
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            // return this.$message.error(res.msg);
          }
          _this.HouseAgent = res.data;
        })
        .catch(() => {});
    },
    //意向单数
    getIntentionNum() {
      let _this = this;
      this.$http
        .get("/house/houseinfo/getIntentionNum", {
          params: {
            houseId: this.HousingID
          }
        })
        .then(({ data: res }) => {
          if (res.code != 0) {
            // return this.$message.error(res.msg);
          }
          _this.IntentionNum = res.data;
        })
        .catch(() => {});
    },

    getdataFormInfo(obj) {
      this.dataFormInfo = obj;
    },
    tabClick(obj) {
      if (obj.name == "tixingjilu") {
        // this.sysremindAdd = true;
        // setTimeout(() => {
        //
        this.$refs.sysremindAdd.dataForm.moduleId = this.HousingID;
        this.$refs.sysremindAdd.dataForm.type = 2;
        this.$refs.sysremindAdd.init();
        // }, 100);
      }
    },
    //部门change
    deptIdChange(val) {
      let a = "";
      if (this.$refs.myCascader.getCheckedNodes()[0]) {
        a = this.$refs.myCascader.getCheckedNodes()[0].value;
        this.AgentForm.deptId = a;
        this.getUserList(a);
      } else {
        this.AgentForm.deptId = "";
      }
    },
    // 获取部门员工列表
    getUserList(deptId) {
      let _this = this;
      this.$http
        .get(`/sys/user/deptUserList`, {
          params: {
            deptId: deptId
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          _this.maintainList = res.data;
        })
        .catch(() => {});
    },
    //确认修改经纪人
    UpdateAgent() {
      let _this = this;
      this.$http
        .post(
          "/house/houseinfo/updateHouseAgent",
          {},
          {
            params: this.AgentForm
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("修改成功！");
          _this.Agentvisible = false;
          _this.getHouseAgent();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "修改失败"
          });
        });
    },
    //封盘
    AddSeal() {
      let _this = this;
      this.$http
        .post("/house/houseseal", this.AgentForm)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message.success("申请成功！");
          _this.Sealvisible = false;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "申请失败"
          });
        });
    },
    //查看联系方式调用接口
    Viewlinks() {
      let _this = this;

      this.$http
        .get(`/house/houseinfo/getTodayHouseNum`)
        .then(({ data: res }) => {
          if (res.code == 0) {
            _this.TodayHouseNum = res.data;
            if (_this.TodayHouseNum == true) {
              _this.fangzhuView = true;
              _this.savePhoneLog();
            } else {
              _this.fangzhuView = false;
              this.$alert("今日查看电话次数已用完", "系统提示", {
                confirmButtonText: "确定",
                callback: action => {
                 
                }
              });
              
            }
          }
        })
        .catch(() => {});
    },
    savePhoneLog() {
      let _this = this;
      this.$http
        .post(
          "/house/houseinfo/savePhoneLog",
          {},
          {
            params: {
              houseId: _this.HousingID
            }
          }
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
        })
        .catch(() => {});
    },
    //判断操作权限
    hasPermissionInfo(val) {
      let _this = this;
      let arr = _this.dataFormInfo.permissionListDTO;
      if (arr && arr != []) {
        for (let i = 0; i < arr.length; i++) {
          const element = arr[i];
          if (element.permission.indexOf(val) != -1 && element.state == true) {
            return true;
          }
        }
      } else {
        return false;
      }
    }
  },
  watch: {
    $route(to, from) {
      if (to.name == "HousingPages") {
        // console.log("详情页");
        this.HousingID = this.$route.query.ID;
        this.transactionType = this.$route.query.transactionType;
        this.type = this.$route.query.type;
        this.fangzhuView = false;
        this.getHouseAgent();
        this.getIntentionNum();
      }
    }
  }
};
</script>
<style  scoped lang="scss">
.title_span {
  display: inline-block;
  font-size: 16px;
  color: rgb(116, 116, 116);
  line-height: 33px;
}
.Properties {
  height: 130px;
}
.PropertiesIMG {
  width: 180px;
  height: 100%;
  float: left;
  border-radius: 10px;
  overflow: hidden;
}
.PropertiesIMG img {
  width: 100%;
  height: 100%;
}
.PropertiesName {
  float: left;
  margin-left: 20px;
}
.introduction {
  line-height: 22px;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.HouseAgent {
  ul {
    li {
      overflow: hidden;
      padding: 10px 0px;
      color: rgb(121, 121, 121);
      span {
        // display: inline
        float: left;
      }
      .leable {
        width: 60px;
        display: inline-block;
      }
      p {
        margin: 0px;
        padding-bottom: 14px;
      }
    }
  }
}
</style>